<template lang="pug">
  .ratio
    .title 单位（部门）资源使用率
    .main
      .chart1(ref="chart")
      .chart2(ref="chart2")
      .m-btns
        .btn(:class="{active:Index===1}" @click="setMax") 最大
        .btn(:class="{active:Index===2}" @click="setMin") 最小
</template>
<script>
import { option } from '../components/charts'
export default {
  data () {
    return {
      Index: 1,
      name: ['发改委', '教育局', '公积金中心', '住建局', '工商局'],
      value: [20, 40, 60, 80, 99]
    }
  },
  mounted () {
    this.getChart1()
    this.getChart2()
  },
  methods: {
    setMax () {
      this.Index = 1
      this.value.sort((a, b) => {
        return a - b
      })
      this.name.reverse()
      this.getChart1()
      this.getChart2()
    },
    setMin () {
      this.Index = 2
      this.value.sort((a, b) => {
        return b - a
      })
      this.name.reverse()
      this.getChart1()
      this.getChart2()
    },
    getChart1 () {
      let color = ['#031d50', '#7a490f', '#ad3119']
      this.$echarts.init(this.$refs.chart).setOption(option(this.name, this.value, color))
    },
    getChart2 () {
      let color = ['#051b64', '#087b6c', '#0cfaf7']
      this.$echarts.init(this.$refs.chart2).setOption(option(this.name, this.value, color))
    }
  }
}
</script>

<style lang="stylus" scoped>
.ratio
  height 366px
  background-color: #09153d;
  box-shadow: 0px 1px 2px 0px rgba(9, 14, 33, 0.75);
  .title
    padding 0 15px
    height 32px
    line-height @height
    background-color #041646
    font-size 14px
  .main
    position relative
    .chart1
      height 200px
      position absolute
      width 80%
    .chart2
      margin-top 160px
      position absolute
      height 200px
      width 80%
    .m-btns
      position absolute
      top 104px
      right 45px
      .btn
        width 53px
        height 20px
        line-height @height
        text-align center
        border solid 1px #263a7c
        border-radius 2px
        margin-bottom 22px
        color  #fefefe
        font-size 14px
        cursor pointer
        &.active
          background-color: #025bbf;
          border 1px solid #09153d
</style>
